@import '../_config.scss';

.design-cases-show {
    background-color: $color-default;
    padding: 30px 0;

    .title{
        border-right: 1px solid $color-border;
        h1{
            font-size: 18px;
            color: #222222;
            margin: 0;
        }
        .info{
            >div:not(:first-child){
                position: relative;

                &:after{
                    content: '';
                    width: 1px;
                    height: 50%;
                    position: absolute;
                    top: 25%;
                    left: 0;
                    background-color: $color-border;
                }
            }

            margin-top: 10px;
            width: 30%;

            .content{
                font-size: 14px;
                color: #222222;
            }

            .desc{
                font-size: 13px;
                color: #999;
            }
        }
    }

    .designer{
        display: flex;
        flex-flow: row nowrap;
        align-items: center;

        img{
            width: 60px;
            height: 60px;
            border-radius: 50%;
        }
        .desc{
            margin-left: 20px;
            h1{
                font-size: 16px;
                color: #484848;
                margin: 0;
                padding-bottom: 5px;
            }
            .post{
                margin-bottom:5px;
                color: #999;
            }
            .submit-btn{
                box-shadow: 2px 2px 5px 0px #dddddd;
            }
        }
    }

    .article{
      .imgs{
        margin-top: 20px;

        .item{
          display: block;
          width: 100%;
          height: 100px;
          background-repeat: no-repeat;
          background-position: center center;
          background-size: cover;
          margin-bottom: 20px;
        }
      }
      img{
        width: 100%;
        height: 100px;
        margin-bottom: 20px;
      }
    }
}

.design-case-show-mobile{
  padding-top: 15px;
  padding-top: 4vw;
  background-color: #e5e5e5;
  min-height: 100%;

  .content{
    padding: 15px 15px 30px 15px;
    padding: 4vw 4vw 8vw 4vw;
    background-color: #fff;
    h1{
      font-size: 24px;
      font-size: 6.45vw;
    }
    .infos{
      display: flex;
      flex-flow: row nowrap;
      justify-content: flex-start;

      >div{
        margin-right: 10px;
      }

      h2, span{
        font-size: 15px;
        font-size: 4vw;
      }
      h2{
        color: #222222;
      }
      span{
        color: #999999;
      }
    }
    .article{
      line-height: 25px;
      font-size: 16px;
      color: #999999;
    }
  }
}
